<template>
  <!-- 单一列表 -->
  <div class="list-item" v-if="isSingle">
    <div class="list-item-content list-item-content-single">
      {{ item }}
    </div>
  </div>
  <!-- 复杂列表 -->
  <div class="list-item" v-else>
    <div class="list-item-meta">
      <div class="list-item-meta-avatar">
        <Avatar :src="item.meta.avatar"></Avatar>
      </div>
      <div class="list-item-meta-content">
        <h4 class="list-item-meta-title" v-html="item.meta.title"></h4>
        <div class="list-item-meta-description">
          {{ item.meta.description}}
        </div>
      </div>
    </div>
    <div class="list-item-content" v-if="item.content">
      {{ item.content}}
    </div>
    <ul class="list-item-action" v-if="item.action"></ul>
  </div>
</template>
<script>
export default {
  name: 'ListItem',
  props: {
    item: {
      type: [String, Object]
    }
  },
  computed: {
    isSingle() {
      return typeof this.item !== 'object'
    }
  }
}
</script>
